<!-- 页面 -->
<template>
	<s-layout navbar="custom">
		<view>
			<s-tiku-category @update:selected="handleCategoryChange" :isTk="false" content_type="lubo" />
			<s-empty v-if="state.list.length === 0" icon="/static/order-empty.png" text="暂无课程"></s-empty>

			<view v-else class="bg-white order-list-card-box ss-r-10 ss-m-t-14" v-for="item in state.list"
				:key="item.id">
				<view class="ss-order-card-warp ss-flex ss-col-stretch bg-white">
					<view class="img-box ss-m-r-24">
						<image class="order-img" v-if="item.image" :src="sheep.$url.cdn(item.image)" mode="widthFix"
							width="100%"></image>
					</view>
					<view class="box-right ss-flex-col ss-row-between">
						<view class="title-text ss-line-2 ss-m-b-20">{{ item.title }}</view>
						<view class="title-tips ss-flex ss-m-b-20">
							<view class="ss-flex ss-m-r-60">
								<text>主讲人：</text>
								<text>{{ item.teacher_name || '计划社名师' }}</text>
							</view>
							<view class="ss-flex">
								<text>已观看/已更新：</text>
								<text>{{item.complete_count}}/{{item.lesson_num}}</text>
							</view>
						</view>
						<view v-if="(item.all_lessons || []).filter(item => item.lesson_type == '2').length > 0"
							class="download-btn ss-flex" @tap="openMaterialDownloadPopup(item)">
							<uni-icons type="download" size="16" color="var(--ui-BG-Main)"></uni-icons>下载资料
						</view>
					</view>
					<view class="ss-m-l-10" @click="navigatorToVideo(item)">
						<view class="study-btn">学习</view>
					</view>
				</view>
			</view>
		</view>

		<download-material ref="downloadPopup" :materials="materialsList" />
	</s-layout>
</template>

<script setup>
	import DownloadMaterial from '../components/download-material.vue';

	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		formatOrderColor
	} from '@/sheep/hooks/useGoods';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import {
		isEmpty
	} from 'lodash';

	const tradeManaged = computed(() => sheep.$store('app').has_wechat_trade_managed);

	const handleCategoryChange = (selection) => {
		state.category1 = selection.category1;
		state.category2 = selection.category2;
		state.year = selection.year;
		listCourseByUser();
	}

	// 数据
	const state = reactive({
		list: [],
		loadStatus: '',
		error: 0,
		category1: undefined,
		category2: undefined,
		year: undefined,
	});

	const materialsList = ref([]);
	const downloadPopup = ref(null);
	const openMaterialDownloadPopup = (row) => {
		materialsList.value = row.all_lessons.filter(item => item.lesson_type == '2');
		if (materialsList.value.length > 0) {
			downloadPopup.value.showPopup();
		}
	}

	// 获取订单列表
	async function listCourseByUser() {
		state.loadStatus = 'loading';
    let params = {};
    params.content_type='lubo';
    if (state.category1) {
      params.category1 = state.category1;
    }
    if (state.category2) {
      params.category2 = state.category2;
    }
    if (state.year) {
      params.year = state.year;
    }
		let res = await sheep.$api.course.listCourseByUser(params);
		state.error = res.error;
		if (res.code === 1) {
			state.list = res.data;
		}
	}

	onLoad(async (options) => {
		listCourseByUser();
	});

	function navigatorToVideo(item) {
		if(item.all_lessons.length>0){
			sheep.$router.go('/pages/course/lubo', {
				id: item.id,
				recordId: item.lesson_id,
				title: item.lesson_name
			})
		}else{
			sheep.$helper.toast('视频上传中，请等待');
		}
	}
</script>

<style lang="scss" scoped>
	.ss-row-right {
		justify-content: flex-start;
	}

	.ss-order-card-warp {
		padding: 20px 20px 30px 10px;
		border-bottom: 1px solid #eaeaea;

		.s-num {
			color: var(--ui-BG-Main);
			padding: 0px 5px;
		}

		.img-box {
			width: 104rpx;
			height: auto;
			overflow: hidden;

			.order-img {
				max-width: 100%;
				height: auto;
				transition: width 0.3s ease;
				height: auto;
				border-radius: 6rpx;
			}
		}

		.box-right {
			flex: 1;
			position: relative;
		}

		.title-text {
			font-size: 18px;
			font-weight: 500;
			line-height: 40rpx;
			color: #222;
		}

		.title-tips {
			font-size: 14px;
			margin-top: 5px;
			color: #666;
		}
	}

	.download-btn {
		cursor: pointer;
		color: var(--ui-BG-Main);
	}

	.study-btn {
		border-radius: 3px;
		font-size: 14px;
		width: 110px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor:pointer;
		background-color: #ff6000;
		color: #FFF;
		border: none;
		border: 1px solid #f0bb9b;
	}
</style>